<template>
    <!-- 导航 开始 -->
    <van-nav-bar class="nav_bar" fixed placeholder z-index="10" @click-left="goBack" @click-right="goHome">
        <template #left>
            <img src="@/assets/images/arrow_left.png" class="left_arrow" alt="">
        </template>
        <template #right>
            <img src="@/assets/images/home_icon.png" class="left_arrow" alt="" v-if="!$slots.right">
            <slot name="right"></slot>
        </template>
        <template #title>
            <span class="title">{{ title }}</span>
        </template>
    </van-nav-bar>
    <!-- 导航 end -->
</template>
<script>
import { NavBar } from 'vant';
export default {
    name: 'NavBar',
    props: {
        title: {
            type: String,
            default: '标题'
        },
        url: {
            type: String,
            default: ''
        }
    },
    components: {
        [NavBar.name]: NavBar
    },
    data() {
        return {

        }
    },
    methods: {
        // 返回
        goBack() {
            if (this.url) {
                this.$router.push({
                    path: this.url
                })
                return false;
            }
            console.log(window.history.length)
            //alert(window.history.length)
            if (window.history.length <= 1) {
                this.goHome()
                return false;
            }
            this.$router.go('-1');
        },

        // 返回首页
        goHome() {
            this.$router.push({
                path: '/home'
            })
        }
    }
}
</script>
<style lang="less" scoped>
.left_arrow {
    width: 17px;
    height: 17px;
}

.title {
    font-size: 16px;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
}

.nav_bar {
    background: rgba(240, 240, 240, 1);

    ::v-deep(.van-nav-bar) {
        background: #F0F0F0;
    }
}
</style>